<template>
	<view>
		<view class="mains">
			<view class="items " v-for="item in indexList" :key="item.name" @click="godlist(item.key1)">
				<image :src="item.img" mode=""></image>
				<view>{{ item.name }}</view>
			</view>
		</view>
		<view class="bgImage">
			<image src="../../../static/index/home/Slice 2@3x.png" mode="" style="width: 100%;height: 130rpx;"></image>
			<view class="" style="display: flex;width: 100%;">
				<image src="../../../static/index/home/Slice 3@3x.png" mode="" style="width: 49%;height: 190rpx;margin-right: 15rpx;"></image>
				<image src="../../../static/index/home/Slice 4@3x.png" mode="" style="width: 49%;height: 190rpx;"></image>
			</view>
		</view>
		<view class="" style="display: flex;margin-bottom: 15rpx;margin-left: 30rpx;margin-top: 20rpx;">
			<view class="" style="width: 8rpx;height: 25rpx;background-color: #37c1c4;border-radius: 10rpx;margin-top: 10rpx;margin-right: 5rpx;"></view>
			<text style="letter-spacing: 5rpx;">热门服务</text>
		</view>
		<view class="shopbox" v-for="item in indexList1" :key="item.name">
			<view class=""><image :src="item.img" mode="" style="width: 120rpx;height: 135rpx;margin-top: 15rpx;"></image></view>
			<view class="shopboxright">
				<view class="" style="display: flex;flex-direction: column;">
					<text style="font-weight: 600;font-size: 29rpx;letter-spacing: 5rpx;">{{ item.name }}</text>
					<text style="font-size: 24rpx;font-weight: 300;margin-top: 8rpx;">{{ item.text }}</text>
				</view>
				<view class="" style="margin-top: 25rpx; font-size: 24rpx;color: red;display: flex; ">
					<view class="">
						￥
						<text style="font-size: 35rpx;">{{ item.price }}</text>
						/次
					</view>

					<view class="" style="margin-left: 180rpx;margin-top: 10rpx;">
						<text style="color: #999;">{{ item.note }}人已购买</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			indexList: [
				{ name: '上门打针', img: '../../../static/index/home/1@3x.png', key1: 'dz' },
				{ name: '静脉采血', img: '../../../static/index/home/2@3x.png', key1: 'cx' },
				{ name: '普通换药', img: '../../../static/index/home/3@3x.png', key1: 'hy' },
				{ name: '外科拆线', img: '../../../static/index/home/4@3x.png', key1: 'wk' },
				{ name: '留置胃管', img: '../../../static/index/home/5@3x.png', key1: 'lz' },
				{ name: 'PICC换药', img: '../../../static/index/home/6@3x.png', key1: 'picc' },
				{ name: '上门导尿', img: '../../../static/index/home/7@3x.png', key1: 'dn' },
				{ name: '压疮护理', img: '../../../static/index/home/8@3x.png', key1: 'hl' },
				{ name: '上门输液', img: '../../../static/index/home/9@3x.png', key1: 'sy' },
				{ name: '多癌早检', img: '../../../static/index/home/10@3x.png', key1: 'da' },
				{ name: '上门透析', img: '../../../static/index/home/11@3x.png', key1: 'tx' },
				{}
			],
			indexList1: [
				{ name: '普通换药', img: '../../../static/index/home/pthy.png', key1: 'dz', text: '伤口清洁消毒，换敷料', price: '159', note: '2395' },
				{ name: '外科拆线', img: '../../../static/index/home/wk.png', key1: 'cx', text: '外科手术拆线换药', price: '159', note: '1295' },
				{ name: '导尿', img: '../../../static/index/home/dn.png', key1: 'hy', text: '外科手术拆线换药', price: '259', note: '1445' },
				{ name: 'PICC换药', img: '../../../static/index/home/picc.png', key1: 'picc', text: '长期留置PICC管的换药和护理', price: '199', note: '3547' }
			]
		};
	},
	methods: {
		godlist(val) {
			console.log(val);
		}
	}
};
</script>

<style lang="scss">
.mains {
	width: 686rpx;
	padding: 0 30rpx 15rpx 30rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 20rpx auto;
	background-color: #fff;

	.items {
		width: 20%;
		margin-left: 15rpx;
		margin-top: 20rpx;

		image {
			margin-left: 25rpx;
			width: 48rpx;
			height: 48rpx;
		}

		view {
			font-size: 24rpx;
			font-weight: 400;
			color: #1d2129;
		}
	}
}
.bgImage {
	width: 686rpx;
	margin-left: 30rpx;
}
.shopbox {
	width: 686rpx;
	margin-left: 30rpx;
	padding: 30rpx 15rpx 20rpx 50rpx;
	background-color: #fff;
	box-sizing: border-box;
	margin-top: 15rpx;
	display: flex;
	border-radius: 14rpx;
	.shopboxright {
		margin-left: 45rpx;
	}
}
</style>
